import React, { Component, PropTypes } from 'react';
import { Router, Route, IndexRoute, Link } from 'react-router';
import styles from './RequirePhone.less';
import comm from './common.less';
import { Checkbox, message } from 'antd';
import { phoneValid } from '~/Util';
import Loading from './Loading/Loading';
import Customer from '~/services/Customer';
import phone from './assets/phone.png';
const RegisterType = {
  Newer: 1,
  Register: 2,
}
class RequirePhone extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      status: true,
    }
    const object = this.props.location.state || {};
    this.userPhone = object.userPhone || '';
  }
  onChange = (e) => {
    this.setState({
      status: e.target.checked,
    })
  }
  onSubmit = (e) => {
    const phoneNumber = this.refs.phone.value;
    if (!phoneValid(phoneNumber)) {
      message.error('请输入正确的手机号码');
    } else {
      Loading.show();
      Customer.getMemberInfoByPhone({ mobilephone: phoneNumber }).then(data => {
        Loading.hide();
        const member = data.member || {};
        this.context.router.push({
          pathname: '/',
          state: {
            mobilephone: phoneNumber,
            username: member.fullname || '营养家会员',
            score: member.bh_AVAILABLE_POINTS || 0,
            isRegister: member === {} ? RegisterType.Newer : RegisterType.Register,
            userPhone: this.userPhone,
          },
        });
        return data;
      }).catch(err => {
        Loading.hide();
        message.error('网络错误')
      })
    }
  }
  render() {
    const nextStepClass = this.state.status ? styles.access : styles.deny;
    return <div>
             <div className={styles.phone}>
               <img src={phone} className={styles.phoneimg} />
               <input type="tel" placeholder="请输入手机号码" ref="phone" />
             </div>

             <div className={styles.describe}>
                <p className={styles.firstRow}>
                  <Checkbox checked={this.state.status}
                    className={styles.Checkbox} onChange={this.onChange}
                  />创建积分账户默认成为我们的会员，即表示您
                </p>
                <p className={styles.secondRow}>
                  同意汤臣倍健营养家会员章程及相关说明
                </p>
            </div>
             <div className={comm.textcenter}>
               <button disabled={!this.state.status} onClick={this.onSubmit}
                 className={`${styles.finishButton} ${nextStepClass}`}
               >下一步</button>
             </div>
           </div>
  }
}

RequirePhone.propTypes = {
};
RequirePhone.contextTypes = {
  router: PropTypes.object,
}

export default RequirePhone;
